<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom1" style="height: 100px;"></div>
    </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
export default {
    data() {
        return {
            title: '服务事项概览'
        }
    },
    methods: {
        loadPie() {
            const data = [
                { type: '数据查询', value: 57 },
                { type: '投诉受理', value: 25 },
                { type: '设备管理', value: 10 },
                { type: '其他', value: 8 },
            ];
            const piePlot = new Pie(this.$refs.bottom1, {
                appendPadding: 0.8,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 1,
                innerRadius: 0.4,
                label: {
                    type: 'inner',
                    offset: '-50%',
                    style: {
                        textAlign: 'center',
                        fontSize: 16,
                    },
                },
                legend: {
                    itemName: {
                        style: {
                            fill: 'white'
                        }
                    }
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize: 15
                        }
                    }
                },
                state: {
                    active: {
                        style: {
                            shadowBlur: 4,
                            stroke: '#000',
                            fill: 'pink',
                        },
                    },
                },
                interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
                statistic: {
                    title: false,
                    content: {
                        style: {
                            whiteSpace: 'pre-wrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                        },
                        content: ' ',
                    },
                },
            });
            piePlot.render();
        }
    },
    mounted() {
        this.loadPie();
    }
}
</script>
<style lang="less" scoped></style>